import { observer } from 'mobx-react';
import { useEffect, useState } from 'react';
import ChartsConfig from '../../../config/ChartsConfig';
import ChartStore from '../../../stores/ChartStore';

import './Chart.scss';
import { ChartLine } from './ChartLine';
import { DeleteBtn } from './Delete';
import { RangeTabs } from './RangeTabs';

import { Layout, Menu } from 'antd';
import StatisticStore from '../../../stores/StatisticStore';
import icons from '../../../images/chartImages';
import { OptionType } from '../../../models/ChartModels';
import { StrategiesMap, StrategyLineList } from '../../../services/StatisticService';
import eventBus from '../../../utils/eventBus';

const { Sider } = Layout;
const { SubMenu } = Menu;

export const FullScreenCharts = observer(() => {
    useEffect(() => {
        ChartStore.paintChart(false);
    }, [])
    const [collapsed, onCollapse] = useState(true,);
    var optionList = ChartsConfig.basicOptions.map((tab, idx) => {

        if (tab.id === 6) {
            return <DeleteBtn key={55} />
        }
        if (tab.id === 3) {
            return <ChartLine key={333} />
        }
        var icon = ChartStore.iconMap[tab.id];
        return (
            <li key={idx} onClick={(e) => {
                if (tab.id == 1) {
                    var pop: any = document.getElementById("pop");
                    var head = document.getElementsByTagName("head")[0];
                    head.removeChild(pop);
                    ChartStore.fullScreen = false;
                    eventBus.emit('fullScreen', false);

                    var flutter_inappwebview = (window as any).flutter_inappwebview;
                    if (flutter_inappwebview) {
                        flutter_inappwebview.callHandler('hideFull');
                    }
                    return;
                }
                ChartStore.setCurrentOption(tab.id)
            }} className={tab.type || ''} title="Simple shapes">
                <img alt='' className="highcharts-menu-item-btn" src={icon}></img>
                {ChartStore.currentOptionId === tab.id && <ul id={`optionMenu${tab.id}`}>
                    {tab.options.map((option, i) => (
                        <li key={i} className={option.type} title={option.label} onClick={(e) => {
                            ChartStore.onTypePicked(tab.id, option.icon, option.type);
                        }} >
                            <img alt='' className="highcharts-menu-item-btn" src={option.icon}></img>
                        </li>
                    ))}
                </ul>}
            </li>
        );
    });
    optionList.push(<div key='clear' className="clear"></div>);
    return (
        <div className="chart-wrapper  chart-full-wrapper">
            <div className="containerWrapper" style={{ height: '100%' }}>
                <div className="lines">
                    <Sider collapsible={false} collapsed={collapsed} onCollapse={() => onCollapse(!collapsed)}>
                        <div className="title" >技术图形</div>
                        <Menu mode="inline">
                            {StatisticStore.strategyLines.map((l, idx) => <SubMenu key={idx} icon={
                                <div className='content'>
                                    <img className="strategyImg" src={StrategiesMap[l.strategy_name]['icon']} alt='' />
                                    <div className="name">{StrategiesMap[l.strategy_name]['name']}</div>
                                </div>
                            }>
                                {l.strategies.map((s, _idx) => <Menu.Item key={_idx} onClick={() => {
                                    if (StrategyLineList.indexOf(l.strategy_name) > -1) {
                                        ChartsConfig.seriesType = 'line';
                                        ChartStore.onTypePicked(3, icons.series_line, OptionType.seriesLine);
                                    } else {
                                        ChartsConfig.seriesType = 'candlestick';
                                        ChartStore.onTypePicked(3, icons.series_candlestick, OptionType.seriesCandlestick);
                                    }
                                    ChartStore.addAnnotation(s, idx + _idx);
                                }}>{s.begin_date}~{s.end_date}</Menu.Item>)}
                            </SubMenu>
                            )}
                        </Menu>
                    </Sider>
                </div>
                <div className="chartContainer">
                    <div className="tools-wrapper">
                        <div className="highcharts-stocktools-wrapper highcharts-bindings-container highcharts-bindings-wrapper">
                            <div className="highcharts-menu-wrapper">
                                <ul className="highcharts-stocktools-toolbar stocktools-toolbar">
                                    {optionList}
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="tabToolsWrapper">

                        <RangeTabs />
                        <div className="resetBtn" onClick={() => {
                    ChartStore.fullScreen = false;
                    eventBus.emit('fullScreen', false);
                            if (ChartStore.annotationRange.length > 0) {
                                ChartStore.annotationRange = [];
                                ChartStore.changeRangeTab(1, 0);
                            } else {
                                ChartStore.setRange();
                            }
                        }}>
                            重置缩放
                        </div>
                    </div>
                    <div id="container" className="chart" ></div>
                </div>

            </div>

        </div>
    );
})